import { useState, useEffect } from 'react'
import List from './List'
import axios from 'axios'
import WeUI from 'react-weui'
// 2s+  loading...   list 显示出来
// fast mock  比 json-server  更专业
const Loading = () => {
  return (
    <>
      加载中
    </>
  )
}
const  {
  Toast,
  Panel,
  PanelBody,
  PanelHeader
} = WeUI
function App() {
  const [loading, setLoading] = useState(true)
  const [list, setList] = useState([])
  // 数据请求放到父组件这里 App 自有的 方便管理
  useEffect(() => {
    axios
      .get('https://www.fastmock.site/mock/ecde49edeca24af1021f56f686193a45/beers/booklist')
      .then(res => {
        // console.log(data)
        if (res.data) { // 更安全
          setList(res.data)
          setLoading(false)
        } else {
          console.log('出问题了...')
        }
      })
    }, [])
  return (
    <Panel>
      <PanelHeader>
        图书列表
      </PanelHeader>
      <PanelBody>
        {/* <button className='weui-btn weui-btn_primary'></button> */}
        <Toast show={loading} icon="loading" >加载中...</Toast>
        {list.length > 0 && <List data={list}/>}
      </PanelBody>
    </Panel>
  )
}

export default App